<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400&family=Fira+Code&display=swap"
    rel="stylesheet"
  />
  <style>
    html,
    body,
    #container {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    .dark {
      color: #fff;
      background: #050505;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <style id="style"></style>
</body>

<script type="module">
  const container = document.getElementById('container')
  const style = document.getElementById('style')
  const root = document.body.parentElement

  if (window.parent.document.body.parentElement.className.includes('dark')) root.classList.toggle('dark', true)

  window.addEventListener('message', ({ data }) => {
    const payload = typeof data === 'string' ? JSON.parse(data) : data
    if (payload.source !== 'unocss-playground') return

    container.innerHTML = payload.html
    style.innerHTML = payload.css
    root.classList.toggle('dark', payload.dark)
  })
</script>
